import { useEffect } from "react"
import * as echarts from 'echarts'
import { type } from "@testing-library/user-event/dist/type"

const ShowChart = ({ data, id, minMax }) => {
  useEffect(() => {
    var chartDom = document.getElementById(`chart${id}`)
    var myChart = echarts.init(chartDom)


    let solutions = []
    if (data) {
      solutions = data.map((item, index) => [item.num, item.dist, item.time, item.wait, item.delay])
    }

    
    if (minMax) {
      console.log(minMax)
    }

    const option = {
      parallelAxis: minMax && [
        { dim: 0, name: '车辆数', nameLocation: 'end', min: minMax.minNum, max: minMax.maxNum },
        { dim: 1, name: '总路程', nameLocation: 'end', min: minMax.minDist, max: minMax.maxDist },
        { dim: 2, name: '总时间', nameLocation: 'end', min: minMax.minTime, max: minMax.maxTime },
        { dim: 3, name: '等待时间', nameLocation: 'end', min: minMax.minWait, max: minMax.maxWait },
        { dim: 4, name: '延误时间', nameLocation: 'end', min: minMax.minDelay, max: minMax.maxDelay },
      ],
      series: {
        type: 'parallel',
        data: solutions,
        lineStyle: {
          color: id === 1 ? 'blue' : 'red',
          width: 1,
          opacity: 1
        },
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "left",
        top: "center",
        feature: {
          saveAsImage: {
            show: true,
            title: '保存为图片'
          },  // 保存图表
        },
      },
    }


    if (solutions.length) {
      myChart.setOption(option)
    }

  }, [data, minMax])

  return (
    <div id={`chart${id}`} style={{
      height: '65vh',
      width: '100%',
    }}>
    </div>
  )
}

export default ShowChart